<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- jq选择器完全沿用了CSS选择器的语法，我们可以使用CSS选择器语法在js中 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 功能二:将一个div 中的文字变色
			// window.onload = function(){
			// 	document.getElementById("bbb").style.color = "red"
			// }
			
			$(function(){
				// CSS()是一个action,属性一为要修改的CSS样式属性,属性二为对应的值
				// 直接使用标签名表示标签选择器,这里下面标签为div的三行都会变色
				$("div").css("color", "green")
				alert("hello")
				// 使用#XXX表示id为XXX的选择器
				$("#bbb").css("color", "red")
				// 使用.XXX,表示类名为XXX的选择器
				$(".ccc").css("color", "blue")
				
				
				// 并集选择器
				// ccc类的和P标签的都变色
				$(".ccc, p").css("color", "black")
				
				// 交集选择器
				// 一般由一个标签选择器和一个Id或者class选择器配合使用,两个选择器直接没有任何符号,包括空格
				$("p.ccc").css("color","yellow")
				
				
				// 后代选择器  (中间加上空格)
				// 将div中的所有h1颜色进行更改
				$("div h1").css("color", "gold")
				
				// 子选择器:表示选中某个选择器的下一层级元素,直接出现在下一个层级的元素
				$("div>h2").css("color", "orange")
				
				
				// 层级选择器:相邻选择器
				// 在同一层级下的,紧挨着某个选择器指定的元素下的第一个标签
				$("#ul+p").css("color", "red")
				// 同级选择器,挨个某个选择器下面的所有的标签
				$("#ul~p").css("color", "red")
				
			})
		</script>
		
	</head>
	<body>
		<div>第零行</div>
		<div id="bbb">第一行</div>
		<div class="ccc">第二行</div>
		<p>第四行P</p>
		<p class="ccc">第五行</p>
		
		<div>
			<h1>hhhhhh1</h1>
			<p>
				<h1>hhhhhh1</h1>
			</p>
			
			<h2>hhhhhhh2</h2>
			<p>
				<h2>hhhhhhhh2</h2>
			</p>
			
		</div>
		
		<h1>outhhhhhh1</h1>
		
		<p>cengjipppppp</p>
		<ul id="ul">
			<li>11111111</li>
		</ul>
		<p>pppppppp1</p>
		<p>pppppppp2</p>
		
		
	</body>
</html>
